import './TableVideo.scss';
import { defineComponent, ref, computed } from 'vue';
import type { PropType } from 'vue';
import { ElImage } from 'element-plus';
import { getVideoImage } from '../../utils/index';

export default defineComponent({
    name: 'TableVideo',
    props: {
        row: {
            type: Array as PropType<any>,
            default: () => null
        }
    },
    setup({ row }) {
        const play_icon = ref<string>(
            'https://img.static-keyid.cn/toolspace/scrm/2023/09/16951997873589jywsq9syknh3d8e.png'
        );
        const video_default_logo = ref<string>(
            'https://img.static-keyid.cn/toolspace/scrm/2023/09/16957192209256ws1ujxb2hbp9cvj.png'
        );
        const play = (e: any, url: string) => {
            e.stopPropagation();
            window.open(url, '_blank');
        };
        return {
            play_icon,
            video_default_logo,
            play
        };
    },
    render() {
        const slotError = <ElImage class={'video-img'} src={this.video_default_logo} fit="cover" />;
        return (
            <div class={'content-video'}>
                {this.row?.mediaFileInfo?.length ? (
                    <>
                        <ElImage
                            class={'video-img'}
                            vSlots={{ error: slotError }}
                            src={getVideoImage(this.row.mediaFileInfo[0].absolute_url, 60, 60)}
                            fit="cover"
                        />
                        <ElImage
                            onClick={e => this.play(e, this.row.mediaFileInfo[0].absolute_url)}
                            class={'video-play'}
                            src={this.play_icon}
                            fit="cover"
                        />
                    </>
                ) : (
                    '--'
                )}
            </div>
        );
    }
});
